<template>
  <div class="main">
    <scroll :isEnd='isEnd'
            @pullup='loadMore'
            :isLoading='true'
            :preventDefaultException='{ tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/ }'
            :tagException='{ className: /(^|\s)chat-box(\s|$)/ }'
            ref='scrollBox'>
      <div class="cont">
        <div class="title">{{meetingInfo.meetingName}}</div>
        <ul class="question-list"
          v-if="questionList.length">
          <li class="question-item"
            v-for="info in questionList"
            :key="`qa_${info.qaId}`">
            <div class="user-info">
              <div class="avatar"
                :style="{backgroundImage:`url('${info.userAvatar || agentLogo}')`}"></div>
              <div class="nickname">{{info.userName || '管理员'}}</div>
            </div>
            <div class="cont">
              <div class="question-cont">
                <p class="text">{{info.content}}</p>
                <p class="date">{{formatDate2(info.createTime)}}</p>
              </div>
              <div class="reply-info"
                v-if="info.reply && info.reply.length">
                <div class="reply-item"
                  v-for="(replyInfo, i) in info.reply"
                  :key="`reply_${i}`">
                  <div class="text">{{replyInfo.replyUserName}}：{{replyInfo.content}}</div>
                  <ul class="img-list"
                    v-if="replyInfo.imagesUrl && replyInfo.imagesUrl.length">
                    <li class="img-item"
                      v-for="(src,k) in replyInfo.imagesUrl"
                      :key="`src${k}`"
                      :style="{backgroundImage:`url('${src}')`}"></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div v-if="noData" class="not-data">暂无提问</div>
      </div>
    </scroll>
    <div class="bottom">
      <div class="btn" @click="isShowMask = true">我要提问</div>
    </div>
    <!-- 提问输入框 -->
    <div class="qa-mask"
      v-show="isShowMask"
      @click="hideMask($event)">
      <div class="qa-wrapper">
        <div class="qa-cont-wrapper">
          <div class="qa-cont">
            <textarea
              placeholder="说出你想说的…"
              rows="6"
              maxlength="130"
              v-model="content">
            </textarea>
            <p class="tip">{{content.length}}/130</p>
          </div>
        </div>
        <div class="bottom">
          <div class="btn"
            @click="saveQuestion()">我要提问</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import scroll from '@/components/scroll'
export default {
  components: {
    scroll
  },
  data () {
    return {
      meetingId: this.$route.query.meetingId,
      // 会议信息
      meetingInfo: {
        meetingName: ''
      },
      // 提问列表
      isEnd: true,
      page: 1,
      pageSize: 10,
      noData: false,
      questionList: [],
      // 添加提问
      isShowMask: false,
      isLoading: false,
      content: '',
      agentLogo: ''
    }
  },
  methods: {
    // 保存提问
    saveQuestion () {
      let stepContent = this.content.replace(/\s/g, '')
      if (!stepContent.length) {
        return this.$toast('请输入回复内容')
      }
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      let url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/qa/send`
      let params = {
        content: this.content,
        meetingId: this.meetingId,
        userId: sessionStorage.getItem('userId'),
        agentId: sessionStorage.getItem('agentId'),
        userAvatar: sessionStorage.getItem('cpUserAvatar'),
        userName: sessionStorage.getItem('cpUserName')
      }
      this.$posts(url, params).then(res => {
        this.isLoading = false
        if (res.code === 200) {
          this.content = ''
          this.$toast(res.message)
          this.questionList = []
          this.page = 1
          this.fetchQuestionList()
          this.operateTrack('ASK')
          this.isShowMask = false
        } else {
          this.$toast(res.message)
        }
      })
    },
    // 获取会议信息
    fetchMeetingInfo () {
      this.$_load.show()
      let url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/${sessionStorage.getItem('agentId')}/detail/${this.meetingId}/${sessionStorage.getItem('userId')}`
      this.$get(url).then(res => {
        this.$_load.hide()
        if (res.code === 200) {
          let data = res.data
          if (data) {
            this.meetingInfo = data
            // 用应用logo作为默认头像
            this.agentLogo = data.squareLogoUrl || ''
          }
        } else {
          this.$toast(res.message)
        }
      })
    },
    // 获取我的提问
    fetchQuestionList () {
      this.$_load.show()
      let url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/qa/${sessionStorage.getItem('agentId')}/list/${this.meetingId}/${sessionStorage.getItem('userId')}`
      let params = {
        currentPage: this.page,
        pageSize: this.pageSize
      }
      this.$get(url, params).then(res => {
        this.$_load.hide()
        if (res.code === 200) {
          let data = res.data
          if (data.total > 0) {
            this.noData = false
          } else {
            this.noData = true
          }
          if (data && data.list && data.list.length) {
            let questionList = data.list
            this.questionList = this.questionList.concat(questionList)
            if (this.questionList.length < data.total) {
              this.isEnd = false
              this.page++
            } else {
              this.isEnd = true
            }
            this.refreshScroll()
          } else {
            this.questionList = []
            this.isEnd = true
          }
        } else {
          this.$toast(res.message)
        }
      })
    },
    // 加载更多
    loadMore () {
      this.fetchQuestionList()
    },
    refreshScroll () {
      setTimeout(() => {
        if (this.$refs.scrollBox) {
          this.$refs.scrollBox.refresh()
        }
      }, 0)
    },
    // 点击蒙层隐藏提问输入框
    hideMask (e, type) {
      let className = e.target.className
      if (className === 'qa-mask') {
        this.isShowMask = false
      }
    },
    // 互动统计
    operateTrack (operateType) {
      let url = `${this.SERVICE_PORTAL}${this.SERVICE_MEETING}/${sessionStorage.getItem('agentId')}/${this.meetingId}/operate/${sessionStorage.getItem('userId')}/${operateType}`
      this.$posts(url).then(res => {
        console.log('operateTrack', res.message)
      })
    }
  },
  created () {
    this.fetchMeetingInfo()
    this.fetchQuestionList()
  }
}
</script>
<style lang="stylus" scoped>
.main
  width 100%
  height 100vh
  background #fff
  padded_box(border-box, 0 0 50px)
  position relative
  >>> .c_scroll
    bottom 50px
  .cont
    width 100%
    height 100%
    scroll()
    padded_box(border-box, 0 12px)
    .title
      width 100%
      padded_box(border-box, 24px 0)
      border-bottom 0.5px solid #eee
      line-height 22px
      font-size 16px
      font-weight 700
      color #333
      noWrap()
    .not-data
      width calc(100% - 30px)
      height 140px
      margin 0 auto
      line-height 240px
      text-align center
      font-size 12px
      color #B2B2B2
      border-radius 8px
    .question-list
      width 100%
      margin-top 12px
      .question-item
        width 100%
        margin-bottom 12px
        &:last-of-type
          .cont::after
            display none
        .user-info
          width 100%
          display flex
          align-items center
          .avatar
            width 28px
            height 28px
            border-radius 50%
            background-repeat no-repeat
            background-position center
            background-size 100%
          .nickname
            height 20px
            line-height 20px
            font-size 14px
            color #333
            margin-left 6px
        .cont
          width 100%
          padded_box(border-box, 0 0 12px 34px)
          position relative
          margin-top 4px
          &::after
            content ''
            display block
            width calc(100% - 34px)
            height 1px
            position absolute
            bottom 0
            right 0
          .question-cont
            width 100%
            .text
              line-height 20px
              font-size 14px
              color #333333
            .date
              height 18px
              line-height 18px
              font-size 12px
              color #999999
          .reply-info
            width 100%
            padded_box(border-box,0 12px)
            background #F4F4F4
            border-radius 4px
            margin-top 8px
            .reply-item
              width 100%
              padded_box(border-box, 12px 0)
              border-bottom 1px solid #E6E6E6
              &:last-of-type
                border none
              .text
                line-height 20px
                font-size 14px
                color #666
              .img-list
                width 100%
                display flex
                align-items center
                padded_box(border-box, 0 0 6px)
                margin-top 6px
                .img-item
                  width 90px
                  height 90px
                  background-repeat no-repeat
                  background-position center
                  background-size cover
                  border-radius 2px
                  & + .img-item
                    margin-left 12px
  // 底部按钮
  .bottom
    width 100%
    height 50px
    background #fff
    box-shadow: 0px -1px 10px 0px rgba(76, 81, 86, 0.1)
    padded_box(border-box, 6px 16px)
    position absolute
    bottom 0
    left 50%
    transform translate(-50%, 0)
    .btn
      width 100%
      height 38px
      background #0080FF
      line-height 18px
      text-align center
      font-size 14px
      color #fff
      padded_box(border-box, 10px 0)
      border-radius 16px
  // 提问输入框
  .qa-mask
    width 100%
    height 100%
    background rgba(0,0,0,0.2)
    display flex
    align-items flex-end
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    .qa-wrapper
      width 100%
      background #fff
      .qa-cont-wrapper
        width 100%
        padded_box(border-box, 12px)
        .qa-cont
          width 100%
          height 158px
          background: #F4F4F4
          border-radius 4px
          padded_box(border-box, 12px 12px 8px)
          textarea
            height 120px
            line-height 20px
            font-size 14px
            color #333
            resize none
            &::-webkit-input-placeholder
              font-size 14px
              color #999999
            &:-moz-placeholder /* Mozilla Firefox 4 to 18 */
              font-size 14px
              color #999999
            &::-moz-placeholder /* Mozilla Firefox 19+ */
              font-size 14px
              color #999999
            &:-ms-input-placeholder /* Internet Explorer 10+ */
              font-size 14px
              color #999999
          .tip
            height 18px
            line-height 18px
            text-align right
            font-size 12px
            color #999999
            margin-right -4px
      .bottom
        position relative
        box-shadow none
</style>
